<template>
  <div :id="editorContainerKey"></div>
</template>

<script lang="ts" setup>
import { onBeforeUnmount, onMounted, reactive, watch } from 'vue';
import wangEditor from 'wangeditor';
// import {reactive,ref,onBeforeUnmount,onMounted}from 'vue'
const menus = [
  'head',
  'bold',
  'fontSize',
  'fontName',
  'italic',
  'underline',
  'strikeThrough',
  'indent',
  'lineHeight',
  'foreColor',
  'backColor',
  'link',
  'todo',
  'justify',
  'quote',
  'emoticon',
  // 'image',
  'splitLine',
]
interface Props {
  modelValue: string,
  editorContainerKey?: string
}
interface Emits {
  (t: 'update:modelValue', c: string): void
}
const props = withDefaults(defineProps<Props>(), {
  editorContainerKey: 'editorContainerId',
}), emit = defineEmits<Emits>()
const state = reactive({
  editor: null
})
watch(() => props.modelValue, v => {
  state.editor.txt.html(v)
})
function editorChangeHook(v: string) {
  emit('update:modelValue', v)
}
onMounted(() => {

  const editor = new wangEditor(document.getElementById(props.editorContainerKey))
  // editor.config.zIndex=1
  // 内容被修改时,的事件绑定
  editor.config.onchange = editorChangeHook
  // 没有内容的提示
  editor.config.placeholder = '';
  editor.config.menus = menus
  editor.config.showLinkImg = false
  editor.config.showLinkImgAlt = false
  editor.config.showLinkImgHref = false
  editor.create()
  state.editor = editor
  editor.txt.html(props.modelValue)
})
onBeforeUnmount(() => {
  state.editor.destroy()
  state.editor = null
})
</script>

<style lang="less" scoped>
#toolbarContainer {
  /*height: 100px;*/
  /*background-color: #2c3e50;*/
  display: block;
}
</style>
